<template>
  <el-card shadow="hover">
    <el-button type="primary" @click="add">添加</el-button>
    <el-table :data="tableData">
      <el-table-column 
       type="index"
        label="序号"
        width="40"
        align="center"
       ></el-table-column>
        <el-table-column      
        label="动漫"
        prop="name"
        width="150"
        align="center"       
       >
      
    
       </el-table-column>
          <el-table-column 
        prop="role"
        label="角色"
        width="width"
        align="center"
       >
       <template slot-scope="{ row }">
            <div>{{row.role.name}}</div>
           </template>
       </el-table-column>
        <el-table-column 
       type="index"
        prop="role"
        label="特点"
        width="200"
        align="center"
       >
       <template slot-scope="{ row }">
            <div v-for="(item,index) in row.role.Attributes" :key="index">
               <el-tag>{{item}}</el-tag>
            </div>
            
          
           </template>
       </el-table-column>
       <el-table-column 
        label="操作"
        width="200"
        align="center"
       >
       <template slot-scope="{ row }">
          <el-button title="添加特点" icon="el-icon-top" type="success" size="mini" @click="addrole(row.id)">
             </el-button>
          <el-button title="修改特点" icon="el-icon-edit" type="primary" size="mini" @click="editrole(row.role.id)">
             </el-button>
             <el-button title="删除" icon="el-icon-delete" type="danger" size="mini" @click="deletename(row.id)">
             </el-button>   
           </template>
       </el-table-column>
      
    </el-table>
     <el-pagination
  small
  layout="prev, pager, next"
  :total="50">
</el-pagination> 
  <el-dialog v-show="isaddshow">
    <el-form >
    dsfadsfdsafsdfsadfadfad
  </el-form>
  </el-dialog>
  
  </el-card>


</template>
<script>
  import { getDongmanList } from '@/api/dongman'
  export default {
    data() {
      return {
        tableData:[],
        isaddshow:true
      }
    },
    created(){
 this.fatchData()
       
    },
    mounted() {
       this.fatchData()
       
    },
    methods:{
     async fatchData(){
        const result = await getDongmanList({page:1,size:3})
        if(result.code ===200){
          this.tableData=result.data
          console.log(this.tableData)
        }
        
      }
    }
  }
</script>
